<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      html,
      body {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100vh;
        background-color: #02203e;
      }
      #main1 {
        width: 100%;
        height: 30vh;
        padding: 0;
      }
      #main2 {
        width: 100%;
        height: 30vh;
        padding: 0;
      }
      #main3 {
        width: 100%;
        height: 30vh;
        padding: 0;
      }
      #main4 {
        width: 100%;
        height: 30vh;
        padding: 0;
      }
      #main5 {
        width: 100%;
        height: 30vh;
        padding: 0;
      }
      h3 {
        color: #fff;
      }
    </style>
  </head>

  <body>
    <h3>原始</h3>
    <div id="main1"></div>
    <h3>6</h3>
    <div id="main2"></div>
    <h3>9</h3>
    <div id="main3"></div>
    <h3>12</h3>
    <div id="main4"></div>
    <h3>低</h3>
    <div id="main5"></div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/size-sensor/dist/size-sensor.min.js"></script>

    <script>
      const test1 = [
        67249, 67028, 66051, 65898, 62012, 64949, 65280, 67030, 66922, 66566, 64637, 64557, 63438, 63220, 63605, 61981,
        61864, 61110, 60851, 58985, 59131, 58714, 58294, 55604, 55688, 56251, 55784, 58594, 57585, 56589, 56317, 56151,
        56926, 55145, 55022, 54578, 52990, 52841, 52648, 53184, 53719, 53115, 53645, 53720, 53674, 53385, 53085, 51723,
        51222, 51020, 51530, 50979, 51254, 51181, 51622, 51706, 53089, 51517, 51739, 51714, 51540, 50675, 50761, 50972,
        51337, 51391, 50262, 51112, 50978, 52046, 51578, 51317, 52118, 52369, 53211, 54747, 55534, 56695, 56986, 58329,
        58508, 57921, 59724, 59719, 61577, 62259, 62843, 62590, 63119, 64626, 68918, 71712, 74618, 75380, 78004, 80107,
        83017, 85350, 88000, 88880, 92210, 95092, 97010, 101175, 107201, 106715, 113257, 120233, 124012, 130784, 92791,
        97825, 73074, 82421, 76291, 79787, 90313, 98051, 99037, 95173, 102763, 124902, 149540, 163653, 169958, 168524,
        175382, 181309, 174538, 168295, 172111, 181338, 183389, 184091, 195603, 207169, 203572, 189291, 176833, 183943,
        186501, 182416, 189084, 202809, 208934, 215348, 217361, 216360, 199960, 172370, 153517, 158019, 164838, 182686,
        206383, 208618, 210537, 211519, 209431, 214782, 207126, 207922, 209109, 210721, 214967, 211381, 209236, 207095,
        211252, 215144, 212351, 213272, 212008, 212315, 212879, 215858, 222384, 220417, 220259, 218822, 220531, 223223,
        221414, 221495, 219424, 214036, 215631, 218263, 216464, 216558, 212873, 216118, 213615, 215355, 214697, 213725,
        207000, 207926, 208441, 210200, 210739, 210212, 208763, 205558, 205350, 204105, 202758, 194914, 190803, 191099,
        194160, 196843, 195010, 192729, 191338, 187974, 187177, 185583, 185456, 180854, 180224, 174109, 168166, 170709,
        169680, 164472, 161073, 158601, 156529, 152959, 147659, 144255, 143493, 142327, 142270, 141172, 141365, 140740,
        139064, 136704, 134398, 131873, 134407, 132255, 132135, 131967, 131260, 130719, 129640, 127664, 125494, 125255,
        123337, 121237, 119976, 119377, 118220, 115850, 112943, 110409, 107696, 106601, 104101, 103761, 103286, 104103,
        101935, 98881, 96820, 96127, 96122, 95490, 91269, 87086, 85256, 85824, 85619, 84193, 83077, 82648, 82392, 82545,
        81683, 80494, 79378, 77598, 76708, 74750, 74037,
      ];

      const test2 = [
        67249, 67138, 66776, 66556, 65647, 65531, 65203, 65203, 65348, 65459, 65897, 65832, 65525, 64890, 64337, 63573,
        63110, 62536, 62105, 61399, 60653, 60109, 59514, 58596, 57736, 57280, 56722, 56702, 56584, 56748, 56853, 56836,
        57027, 56452, 56025, 55689, 55135, 54583, 53870, 53543, 53326, 53082, 53192, 53338, 53509, 53543, 53437, 53205,
        52801, 52351, 51994, 51593, 51288, 51197, 51264, 51378, 51638, 51728, 51809, 51897, 51884, 51712, 51324, 51233,
        51166, 51112, 50899, 50972, 51008, 51187, 51227, 51215, 51524, 51734, 52106, 52556, 53216, 54112, 54923, 55917,
        56799, 57328, 58027, 58531, 59296, 59951, 60673, 61452, 62017, 62835, 64059, 65634, 67597, 69728, 72209, 74789,
        77139, 79412, 81643, 83893, 86260, 88758, 91090, 93727, 96928, 99900, 103408, 107598, 112098, 117033, 114632,
        113150, 106453, 100151, 92197, 83698, 83285, 83322, 87650, 89775, 94187, 101706, 111577, 122511, 134331, 146556,
        158659, 168061, 172227, 173001, 173359, 175495, 176830, 177293, 180804, 187283, 192527, 193852, 192759, 192735,
        191218, 187092, 184678, 186931, 192281, 197515, 202658, 208316, 210128, 205055, 195819, 186264, 177510, 171898,
        172968, 179010, 188513, 197430, 204862, 210211, 210335, 210219, 209981, 209848, 210771, 210204, 210556, 210418,
        210775, 211512, 211076, 211391, 211853, 212723, 212994, 213113, 214786, 215976, 217352, 218436, 219711, 220939,
        220777, 220957, 220818, 220020, 219203, 218377, 217552, 216729, 215637, 215984, 215648, 215163, 214869, 214397,
        213418, 212053, 211190, 210331, 209671, 209086, 209380, 208985, 208470, 207454, 206124, 203574, 200581, 198171,
        196306, 195096, 193804, 193440, 193529, 193009, 191845, 189968, 188376, 186397, 184544, 182233, 179065, 176586,
        173957, 171226, 168034, 165450, 163510, 160552, 156882, 153512, 150582, 147870, 145493, 143529, 142480, 141894,
        141156, 140219, 138907, 137357, 136197, 134783, 133628, 132839, 132316, 132123, 131329, 130564, 129457, 128338,
        127018, 125437, 123827, 122446, 121233, 119666, 117933, 116129, 114082, 111953, 109600, 107585, 105975, 104924,
        103964, 102677, 101464, 100192, 98998, 97562, 95784, 93819, 91891, 90174, 88424, 86541, 85175, 84436, 83958,
        83412, 82756, 82139, 81523, 80681, 79734, 78435, 77160,
      ];

      const test3 = [
        67249, 67138, 66776, 66556, 65647, 65531, 65495, 65687, 65824, 65748, 65482, 65316, 65043, 65177, 65028, 64661,
        64087, 63442, 62807, 62179, 61576, 61051, 60503, 59614, 58915, 58292, 57700, 57449, 57293, 57011, 56745, 56507,
        56653, 56593, 56457, 56323, 55700, 55173, 54735, 54387, 54117, 53693, 53526, 53382, 53281, 53325, 53352, 53250,
        53032, 52732, 52556, 52259, 51985, 51708, 51512, 51359, 51511, 51544, 51624, 51644, 51706, 51642, 51595, 51523,
        51482, 51294, 51154, 51084, 51003, 51059, 51159, 51221, 51348, 51463, 51665, 52164, 52655, 53290, 53839, 54589,
        55388, 56033, 56850, 57573, 58332, 59079, 59762, 60385, 60917, 61597, 62819, 64151, 65806, 67340, 69090, 71008,
        73277, 75748, 78345, 80563, 82840, 85115, 87518, 90093, 93103, 95737, 98837, 102419, 106322, 110608, 110353,
        110443, 107321, 104568, 101187, 97468, 94144, 91259, 87732, 87996, 88545, 94304, 101761, 111468, 121487, 130177,
        138770, 147911, 156729, 164011, 169256, 172789, 174982, 176553, 179561, 183093, 185567, 187206, 188155, 189469,
        190043, 189935, 190490, 191290, 191487, 192795, 195914, 200306, 202085, 200515, 197304, 193853, 189634, 186717,
        185721, 184750, 184103, 185387, 189505, 196312, 201768, 206556, 209491, 209973, 210679, 210773, 210519, 210259,
        209867, 210758, 211250, 211713, 211856, 211561, 211728, 212463, 214162, 215180, 215749, 216468, 217274, 218520,
        219531, 220489, 220885, 219957, 219426, 219204, 218942, 218500, 217350, 216762, 215886, 215434, 215508, 215296,
        214045, 213096, 212194, 211897, 211299, 210921, 210189, 209173, 208243, 207921, 207347, 205844, 203689, 201506,
        199723, 198398, 197226, 195824, 194406, 192763, 191903, 191323, 190696, 189218, 187371, 185049, 182320, 180028,
        177995, 175472, 172749, 169765, 167062, 164033, 161094, 158437, 155413, 152374, 149907, 147696, 145781, 144026,
        142482, 141265, 140170, 138879, 137999, 136886, 135882, 134838, 133784, 132857, 132072, 131324, 130615, 129598,
        128607, 127397, 126064, 124744, 123355, 121823, 120187, 118511, 116560, 114701, 112797, 110995, 109207, 107638,
        106092, 104530, 103020, 101735, 100570, 99613, 98225, 96425, 94331, 92541, 91068, 89665, 88215, 86718, 85262,
        84293, 83693, 83163, 82447, 81556, 80724, 79799, 78842,
      ];
      const test4 = [
        67249, 67138, 66776, 66556, 65647, 65531, 65495, 65687, 65824, 65898, 65783, 65681, 65364, 65046, 64842, 64516,
        64504, 64184, 63815, 63144, 62495, 61841, 61312, 60566, 59920, 59339, 58688, 58405, 58049, 57672, 57294, 57058,
        56874, 56577, 56304, 56219, 55994, 55710, 55448, 54998, 54675, 54386, 54163, 53961, 53690, 53543, 53382, 53144,
        52996, 52845, 52751, 52568, 52362, 52201, 52032, 51865, 51816, 51660, 51548, 51547, 51574, 51545, 51481, 51480,
        51487, 51505, 51391, 51342, 51166, 51210, 51197, 51164, 51212, 51353, 51557, 51872, 52221, 52663, 53224, 53825,
        54453, 54942, 55621, 56321, 57110, 57934, 58736, 59390, 60022, 60683, 61677, 62793, 64135, 65590, 67113, 68812,
        70599, 72523, 74620, 76810, 79235, 81774, 84115, 86570, 89285, 91896, 94834, 98178, 101594, 105380, 105780,
        106525, 104930, 103874, 102148, 100365, 98958, 98236, 97051, 94963, 93192, 92702, 97431, 102917, 110990, 118166,
        126423, 134883, 141902, 147756, 153845, 161026, 167744, 172677, 176515, 180142, 182943, 184674, 184794, 185014,
        186011, 187188, 188602, 190391, 192520, 195125, 196938, 197704, 197403, 195993, 194050, 191889, 190084, 190107,
        191548, 192032, 192166, 191847, 191186, 191055, 191652, 194614, 199247, 203639, 207816, 210208, 210445, 210318,
        210378, 210680, 210923, 210798, 211204, 211570, 211885, 212313, 212931, 213684, 214602, 215580, 216353, 217026,
        217781, 218467, 219085, 219228, 219457, 219658, 219164, 218843, 218227, 218002, 217426, 216770, 216210, 215563,
        214527, 214018, 213419, 212747, 212270, 211741, 211399, 210519, 209830, 208893, 207898, 206330, 204980, 203578,
        202388, 201275, 199964, 198507, 197055, 195590, 194075, 192532, 191090, 189918, 189037, 187621, 185455, 183277,
        181166, 178811, 176289, 173842, 171288, 168569, 165419, 162369, 159308, 156660, 154502, 152040, 149681, 147703,
        145869, 144044, 142200, 140443, 139339, 138339, 137392, 136529, 135611, 134740, 133763, 132673, 131543, 130588,
        129667, 128780, 127578, 126505, 125345, 124002, 122476, 120783, 118954, 117199, 115416, 113625, 111954, 110526,
        109023, 107315, 105532, 103888, 102486, 101243, 99874, 98248, 96678, 95183, 93711, 92051, 90480, 89127, 87925,
        86793, 85590, 84340, 83349, 82558, 81846, 80923, 79958,
      ];

      const test5 = [
        67556, 67255, 66941, 66616, 66278, 65928, 65566, 65192, 64807, 64409, 64000, 63581, 63152, 62716, 62273, 61825,
        61375, 60925, 60476, 60032, 59593, 59162, 58742, 58333, 57936, 57553, 57185, 56831, 56492, 56167, 55857, 55561,
        55279, 55010, 54754, 54511, 54279, 54058, 53848, 53648, 53457, 53273, 53097, 52926, 52761, 52601, 52445, 52293,
        52144, 51998, 51856, 51717, 51581, 51449, 51322, 51200, 51085, 50978, 50882, 50797, 50728, 50677, 50647, 50643,
        50667, 50724, 50819, 50956, 51139, 51373, 51662, 52009, 52420, 52898, 53446, 54067, 54764, 55538, 56391, 57325,
        58338, 59431, 60601, 61847, 63165, 64550, 65996, 67497, 69043, 70626, 72236, 73861, 75491, 77114, 78719, 80295,
        81835, 83331, 84778, 86172, 87515, 88810, 90064, 91289, 92500, 93715, 94957, 96254, 97635, 99130, 100773,
        102595, 104626, 106890, 109408, 112190, 115240, 118554, 122118, 125909, 129896, 134045, 138311, 142651, 147016,
        151360, 155638, 159807, 163828, 167667, 171296, 174691, 177833, 180708, 183311, 185637, 187691, 189481, 191019,
        192322, 193408, 194300, 195020, 195593, 196044, 196402, 196692, 196942, 197180, 197429, 197712, 198048, 198449,
        198925, 199479, 200110, 200815, 201586, 202417, 203296, 204215, 205164, 206132, 207110, 208089, 209062, 210019,
        210954, 211860, 212730, 213560, 214343, 215075, 215750, 216365, 216914, 217396, 217805, 218140, 218400, 218583,
        218689, 218718, 218672, 218553, 218364, 218106, 217784, 217399, 216955, 216455, 215900, 215294, 214636, 213929,
        213174, 212371, 211519, 210618, 209667, 208664, 207608, 206498, 205330, 204103, 202816, 201466, 200052, 198572,
        197024, 195407, 193720, 191961, 190131, 188229, 186258, 184221, 182121, 179963, 177755, 175505, 173221, 170914,
        168594, 166273, 163961, 161672, 159415, 157203, 155044, 152947, 150920, 148969, 147097, 145306, 143598, 141969,
        140419, 138940, 137529, 136178, 134879, 133623, 132402, 131207, 130028, 128855, 127681, 126498, 125298, 124076,
        122826, 121545, 120230, 118880, 117493, 116071, 114614, 113126, 111609, 110068, 108505, 106926, 105335, 103737,
        102137, 100541, 98953, 97378, 95822, 94291, 92789, 91323, 89896, 88514, 87181, 85902, 84681, 83520, 82422,
        81391, 80428, 79535, 78714, 77965, 77290, 76687, 76158, 75700,
      ];

      const unbind1 = sizeSensor.bind(document.querySelector('#main1'), (element) => {
        // console.log('element ', element);
        myChart.resize({
          width: 'auto',
          height: 'auto',
          animation: {
            duration: 1000,
          },
        });
      });

      // 基于准备好的dom，初始化echarts实例
      const myChart1 = echarts.init(document.getElementById('main1'));
      const myChart2 = echarts.init(document.getElementById('main2'));
      const myChart3 = echarts.init(document.getElementById('main3'));
      const myChart4 = echarts.init(document.getElementById('main4'));
      const myChart5 = echarts.init(document.getElementById('main5'));

      const getOptions = (dataY = []) => {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line', // 默认为直线，可选为：'line' | 'shadow'
              lineStyle: {
                color: ' rgba(121, 177, 255, 0.81)',
              },
            },
            backgroundColor: 'rgba(0,50,99,0.65)',
            borderColor: 'rgba(0,129,255,1)',
            textStyle: {
              color: '#fff',
              fontSize: 14,
              fontFamily: 'SourceHanSansCN',
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
              '00:00',
              '00:05',
              '00:10',
              '00:15',
              '00:20',
              '00:25',
              '00:30',
              '00:35',
              '00:40',
              '00:45',
              '00:50',
              '00:55',
              '01:00',
              '01:05',
              '01:10',
              '01:15',
              '01:20',
              '01:25',
              '01:30',
              '01:35',
              '01:40',
              '01:45',
              '01:50',
              '01:55',
              '02:00',
              '02:05',
              '02:10',
              '02:15',
              '02:20',
              '02:25',
              '02:30',
              '02:35',
              '02:40',
              '02:45',
              '02:50',
              '02:55',
              '03:00',
              '03:05',
              '03:10',
              '03:15',
              '03:20',
              '03:25',
              '03:30',
              '03:35',
              '03:40',
              '03:45',
              '03:50',
              '03:55',
              '04:00',
              '04:05',
              '04:10',
              '04:15',
              '04:20',
              '04:25',
              '04:30',
              '04:35',
              '04:40',
              '04:45',
              '04:50',
              '04:55',
              '05:00',
              '05:05',
              '05:10',
              '05:15',
              '05:20',
              '05:25',
              '05:30',
              '05:35',
              '05:40',
              '05:45',
              '05:50',
              '05:55',
              '06:00',
              '06:05',
              '06:10',
              '06:15',
              '06:20',
              '06:25',
              '06:30',
              '06:35',
              '06:40',
              '06:45',
              '06:50',
              '06:55',
              '07:00',
              '07:05',
              '07:10',
              '07:15',
              '07:20',
              '07:25',
              '07:30',
              '07:35',
              '07:40',
              '07:45',
              '07:50',
              '07:55',
              '08:00',
              '08:05',
              '08:10',
              '08:15',
              '08:20',
              '08:25',
              '08:30',
              '08:35',
              '08:40',
              '08:45',
              '08:50',
              '08:55',
              '09:00',
              '09:05',
              '09:10',
              '09:15',
              '09:20',
              '09:25',
              '09:30',
              '09:35',
              '09:40',
              '09:45',
              '09:50',
              '09:55',
              '10:00',
              '10:05',
              '10:10',
              '10:15',
              '10:20',
              '10:25',
              '10:30',
              '10:35',
              '10:40',
              '10:45',
              '10:50',
              '10:55',
              '11:00',
              '11:05',
              '11:10',
              '11:15',
              '11:20',
              '11:25',
              '11:30',
              '11:35',
              '11:40',
              '11:45',
              '11:50',
              '11:55',
              '12:00',
              '12:05',
              '12:10',
              '12:15',
              '12:20',
              '12:25',
              '12:30',
              '12:35',
              '12:40',
              '12:45',
              '12:50',
              '12:55',
              '13:00',
              '13:05',
              '13:10',
              '13:15',
              '13:20',
              '13:25',
              '13:30',
              '13:35',
              '13:40',
              '13:45',
              '13:50',
              '13:55',
              '14:00',
              '14:05',
              '14:10',
              '14:15',
              '14:20',
              '14:25',
              '14:30',
              '14:35',
              '14:40',
              '14:45',
              '14:50',
              '14:55',
              '15:00',
              '15:05',
              '15:10',
              '15:15',
              '15:20',
              '15:25',
              '15:30',
              '15:35',
              '15:40',
              '15:45',
              '15:50',
              '15:55',
              '16:00',
              '16:05',
              '16:10',
              '16:15',
              '16:20',
              '16:25',
              '16:30',
              '16:35',
              '16:40',
              '16:45',
              '16:50',
              '16:55',
              '17:00',
              '17:05',
              '17:10',
              '17:15',
              '17:20',
              '17:25',
              '17:30',
              '17:35',
              '17:40',
              '17:45',
              '17:50',
              '17:55',
              '18:00',
              '18:05',
              '18:10',
              '18:15',
              '18:20',
              '18:25',
              '18:30',
              '18:35',
              '18:40',
              '18:45',
              '18:50',
              '18:55',
              '19:00',
              '19:05',
              '19:10',
              '19:15',
              '19:20',
              '19:25',
              '19:30',
              '19:35',
              '19:40',
              '19:45',
              '19:50',
              '19:55',
              '20:00',
              '20:05',
              '20:10',
              '20:15',
              '20:20',
              '20:25',
              '20:30',
              '20:35',
              '20:40',
              '20:45',
              '20:50',
              '20:55',
              '21:00',
              '21:05',
              '21:10',
              '21:15',
              '21:20',
              '21:25',
              '21:30',
              '21:35',
              '21:40',
              '21:45',
              '21:50',
              '21:55',
              '22:00',
              '22:05',
              '22:10',
              '22:15',
              '22:20',
              '22:25',
              '22:30',
              '22:35',
              '22:40',
              '22:45',
              '22:50',
              '22:55',
              '23:00',
              '23:05',
              '23:10',
              '23:15',
              '23:20',
              '23:25',
              '23:30',
              '23:35',
              '23:40',
              '23:45',
              '23:50',
              '23:55',
            ],
            axisLabel: {
              showMaxLabel: true,
              rotate: 20,
              margin: 15,
              textStyle: {
                color: '#fff',
                fontSize: 14,
              },
              formatter(params) {
                return params;
              },
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
            axisTick: {
              show: false,
            },
          },

          yAxis: {
            type: 'value',
            axisLabel: {
              formatter(params) {
                return `${params / 10_000}W`;
              },
              textStyle: {
                color: '#fff',
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: 'rgb(23,255,243,0.3)',
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff',
              },
            },
          },

          series: [
            {
              type: 'line',
              color: '#0092f6',
              showSymbol: false,
              symbol: 'circle',
              symbolSize: 10,
              data: dataY,
              smooth: true,
            },
          ],
        };

        return option;
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(getOptions(test1));
      myChart2.setOption(getOptions(test2));
      myChart3.setOption(getOptions(test3));
      myChart4.setOption(getOptions(test4));
      myChart5.setOption(getOptions(test5));
    </script>
  </body>
</html>
